<template>
	<el-dialog
		:title="titleMap[mode]"
		v-model="visible"
		:width="700"
		destroy-on-close
		append-to-body
		@closed="emits('closed')"
	>
		<el-form
			:model="form"
			:rules="rules"
			ref="dialogForm"
			label-width="80px"
			:style="'el-dialog' === 'el-drawer' ? 'padding:0 20px' : ''"
		>
			<div class="static-content-item">
				<div>公司信息</div>
			</div>
			<div class="static-content-item">
				<el-divider direction="horizontal"></el-divider>
			</div>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="客户名称" prop="name">
						<el-input v-model="form.name" clearable placeholder="请输入客户名称"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="销售阶段" prop="sales_stag">
						<el-select v-model="form.sales_stag" style="width:100%" clearable placeholder="请选择销售阶段">
							<template v-for="(item, index) in dictData.crm_sales_stag">
								<el-option
									v-if="item.value != '-1'"
									:key="index" :label="item.label"
									:value="item.value"
								>{{ item.label }}
								</el-option>
							</template>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="需求级别" prop="level">
						<el-radio-group v-model="form.level">

							<el-radio
								v-for="(item, index) in dictData.crm_user_level"
								:key="index" :label="item.value"
							>{{ item.label }}
							</el-radio>

						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="客户来源" prop="from">
						<el-radio-group v-model="form.from">

							<el-radio
								v-for="(item, index) in dictData.crm_user_from"
								:key="index" :label="item.value"
							>{{ item.label }}
							</el-radio>

						</el-radio-group>
					</el-form-item>
				</el-col>

			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="公司规模" prop="scale">
						<el-radio-group v-model="form.scale">

							<el-radio
								v-for="(item, index) in dictData.crm_scale"
								:key="index" :label="item.value"
							>{{ item.label }}
							</el-radio>

						</el-radio-group>
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-form-item label="跟进人" prop="follow_user">
						<ma-select-user v-model="form.follow_user"/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="电话" prop="phone">
						<el-input v-model="form.phone" clearable placeholder="请输入电话"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="邮箱" prop="email">
						<el-input v-model="form.email" clearable placeholder="请输入邮箱"/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="法人" prop="legal_perso">
						<el-input v-model="form.legal_perso" clearable placeholder="请输入法人"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="注册资本" prop="money">
						<el-input v-model="form.money" clearable placeholder="请输入注册资本"/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="所属行业" prop="industry">
						<el-input v-model="form.industry" clearable placeholder="请输入所属行业"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="经营范围" prop="range">
						<el-input v-model="form.range" clearable placeholder="请输入经营范围"/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="公司类型" prop="type">
						<el-input v-model="form.type" clearable placeholder="请输入公司类型"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="官网" prop="com">
						<el-input v-model="form.com" clearable placeholder="请输入官网"/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="地址" prop="address">
						<city-linkage v-model="form.address" valueType="code"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="详细地址" prop="address_detail">
						<el-input v-model="form.address_detail" clearable placeholder="请输入详细地址"/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="开户银行" prop="bank">
						<el-input v-model="form.bank" clearable placeholder="请输入开户银行"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="银行账号" prop="bank_number">
						<el-input v-model="form.bank_number" clearable placeholder="请输入银行账号"/>
					</el-form-item>
				</el-col>
			</el-row>

			<div class="static-content-item">
				<div>联系人信息</div>
			</div>
			<div class="static-content-item">
				<el-divider direction="horizontal"></el-divider>
			</div>
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="姓名" prop="user_name">
						<el-input v-model="form.user_name" clearable placeholder="请输入姓名"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="性别" prop="sex">
						<el-select v-model="form.sex" style="width:100%" clearable placeholder="请选择性别">

							<el-option
								v-for="(item, index) in dictData.sex"
								:key="index" :label="item.label"
								:value="item.value"
							>{{ item.label }}
							</el-option>

						</el-select>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="职位" prop="position">
						<el-input v-model="form.position" clearable placeholder="请输入职位"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="手机" prop="user_phone">
						<el-input v-model="form.user_phone" clearable placeholder="请输入手机"/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="邮箱" prop="user_email">
						<el-input v-model="form.user_email" clearable placeholder="请输入邮箱"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="微信" prop="user_wechat">
						<el-input v-model="form.user_wechat" clearable placeholder="请输入微信"/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="钉钉" prop="user_ding">
						<el-input v-model="form.user_ding" clearable placeholder="请输入钉钉"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="QQ" prop="user_qq">
						<el-input v-model="form.user_qq" clearable placeholder="请输入QQ"/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="状态" prop="status">
						<el-switch v-model="form.status" :active-value="proxy.$CONFIG.SWITCH.ENABLE"
											 :inactive-value="proxy.$CONFIG.SWITCH.DISABLE"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="排序" prop="sort">
						<el-input v-model="form.sort" clearable placeholder="请输入排序"/>
					</el-form-item>
				</el-col>
			</el-row>


		</el-form>
		<template #footer>
			<el-button @click="visible = false">取 消</el-button>
			<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
</template>

<script setup>
import {ref, reactive, defineExpose, onMounted, getCurrentInstance} from 'vue'
import {useRouter} from "vue-router";
import {ElMessage} from 'element-plus'
import crmUser from '@/api/apis/crm/crmUser'
import systemDict from '@/api/apis/system/dataDict'
import cityLinkage from '@/components/maCityLinkage'
import threeLevelLinkage from '@/components/maCityLinkage/threeLevelLinkage'


const emits = defineEmits(['success', 'closed'])
const {proxy} = getCurrentInstance();
const router = useRouter();

const mode = ref('add')
const treeList = ref([])
const visible = ref(false)
const isSaveing = ref(false)
const dialogForm = ref(null)

const titleMap = reactive({add: '新增客户', edit: '编辑客户'})
const dictData = reactive({
	crm_sales_stag: [],
	crm_user_from: [],
	crm_user_level: [],
	crm_scale: [],
	sex: [],
	platform_data_status: [],

})
const form = reactive({
	id: '0',
	sales_stag: '0',
	follow_user: '0',
	name: '',
	from: '0',
	level: '0',
	com: '',
	phone: '',
	email: '',
	legal_perso: '',
	money: '0',
	type: '',
	scale: '0',
	industry: '',
	range: '',
	address: [],
	address_detail: '',
	bank: '',
	bank_number: '',
	user_name: '',
	sex: '0',
	position: '',
	user_phone: '',
	user_email: '',
	user_wechat: '',
	user_ding: '',
	user_qq: '',
	status: proxy.$CONFIG.SWITCH.ENABLE,
	sort: '0',
	mer_id: '0',

})
const rules = reactive({
	name: [{required: true, message: '客户名称必填', trigger: 'blur'}],

})

onMounted(async () => {
	await getDictData()
	if (router.currentRoute.value.query.open) {
		open('add');
	}
})

const getDictData = () => {
	systemDict.getDict('crm_sales_stag').then(res => {
		dictData.crm_sales_stag = res.data
	})
	systemDict.getDict('crm_user_from').then(res => {
		dictData.crm_user_from = res.data
	})
	systemDict.getDict('crm_user_level').then(res => {
		dictData.crm_user_level = res.data
	})
	systemDict.getDict('crm_scale').then(res => {
		dictData.crm_scale = res.data
	})
	systemDict.getDict('sex').then(res => {
		dictData.sex = res.data
	})
	systemDict.getDict('platform_data_status').then(res => {
		dictData.platform_data_status = res.data
	})

}

const open = (type = 'add') => {
	mode.value = type
	visible.value = true

}

const submit = () => {
	dialogForm.value.validate(async (valid) => {
		if (valid) {
			isSaveing.value = true
			const res = mode.value === 'add' ? await crmUser.save(form) : await crmUser.update(form.id, form)
			if (res.success) {
				emits('success', form, mode.value)
				visible.value = false
				ElMessage.success(res.message)
			} else {
				ElMessage.error(res.message)
			}
			isSaveing.value = false
		}
	})
}

const setData = (data) => {
	for (let k in form) {
		if (data[k] || data[k] === 0) {
			form[k] = data[k]
		}
	}
}


defineExpose({
	open, setData
})
</script>
